<style>
html,body{
  font-size: 12px;
}
.{{$t|escape:'html'}}_image_button {
  cursor: pointer;
}
table.{{$t|escape:'html'}}_list {
  width: 500px;
  border-left: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  margin-bottom: 1px;
  font-size: 11px;
}
table.{{$t|escape:'html'}}_list td.border {
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list th {
  text-align: left;
  height: 35px;
  background-color: #eaf2f5;
  padding: 5px 0 5px 10px; 
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  cursor: pointer;
}

table.{{$t|escape:'html'}}_list tr.rowodd td {
  height: 28px;
  background-color: #eeeeee;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  font-size: 11px;
}
table.{{$t|escape:'html'}}_list tr.roweven td {
  height:28px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  font-size: 11px;
}
</style>

<table style="margin-bottom: 10px; border: 1px solid #dddddd; width: 500px; height: 50px;" cellPadding="0" cellSpacing="0">
  <tr>
    <td style="width: 40px; height: 30px; padding-left: 5px; font-weight: 600; font-size: 11px;" align="left">日期</td>
    <td style="width: 100px">
      <input id="{{$t|escape:'html'}}_date_from" type="text"  style="width:100%; height: 23px;" value="{{if isset($search)}}{{$search->c_from|escape:'html'}}{{/if}}"></input>
    </td>
    <td style="width: 20px" align="center"> - </td>
    <td style="width: 100px">
      <input id="{{$t|escape:'html'}}_date_to" type="text" style="width:100%; height: 23px;" value="{{if isset($search)}}{{$search->c_to|escape:'html'}}{{/if}}"></input>
    </td>
    <td style="width: 20px" align="center"></td>
    <td style="width: 120px" align="left">
      <span class="image_button" style="width: 60px;" id="{{$t|escape:'html'}}_search_btn">
        <table>
          <tr>
            <td><img src="image/btn/search.png"></img></td>
            <td>搜索</td>
          </tr>
        </table>
      </span>
    </td>
  </tr>
</table>

<div>
  <table class="{{$t|escape:'html'}}_list" cellPadding="0" cellSpacing="0" width="500px">
    <tr style="background: #e2ecee">
      <td style="width: 50px; height: 35px; padding-left: 10px; border-right: solid 1px #ddd; font-size: 11px; font-weight: 600"></td>
      <td style="width: 150px; padding-left: 10px; border-right: solid 1px #ddd; font-size: 11px; font-weight: 600">已支付</td>
      <td style="width: 150px; padding-left: 10px; border-right: solid 1px #ddd; font-size: 11px; font-weight: 600">未支付</td>
      <td style="width: 150px; padding-left: 10px; border-right: solid 1px #ddd; font-size: 11px; font-weight: 600">总数</td>
    </tr>
    <tr class="roweven">
      <td style="padding-left: 10px">订单</td>
      <td style="padding-left: 10px" id="{{$t|escape:'html'}}_order_paid"></td>
      <td style="padding-left: 10px" id="{{$t|escape:'html'}}_order_unpaid"></td>
      <td style="padding-left: 10px" id="{{$t|escape:'html'}}_order_total"></td>
    </tr>
    <tr class="rowodd">
      <td style="padding-left: 10px">营业额</td>
      <td style="padding-left: 10px" id="{{$t|escape:'html'}}_income_paid"></td>
      <td style="padding-left: 10px" id="{{$t|escape:'html'}}_income_unpaid"></td>
      <td style="padding-left: 10px" id="{{$t|escape:'html'}}_income_total"></td>
    </tr>
  </table>
</div>

<script src="jsrequest.php?script={{$t|escape:'html'}}" type="text/javascript"></script>
<script type="text/javascript" src="libs/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="libs/pozo/common/mydateselect.js"></script>
<script type="text/javascript" src="libs/jquery/jquery-ui-1.8.16.custom.min.js"></script>
<link href="libs/jquery/css/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
  <!--
    if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', init, false);
    }
    window.onload = init;
    
    var _result = JSON.parse('{{$result|@json_encode|escape:'javascript'}}');
    var _search = JSON.parse('{{$search|@json_encode|escape:'javascript'}}');
    
    function init() {
      if (!document.getElementById || !document.createElement || !arguments || arguments.callee._loaded) {
        return;
      }
      arguments.callee._loaded = true;
      
      setObjects();
      
    //searchbox
      var date_from = document.getElementById("{{$t|escape:'html'}}_date_from");
      var date_to = document.getElementById("{{$t|escape:'html'}}_date_to");
      var search_button = document.getElementById("{{$t|escape:'html'}}_search_btn");
      search_button.onclick = function(e) {
        _search.c_from = date_from.value;
        _search.c_to = date_to.value;
        console.log(_search);
        location.href = '?path=ecommerce&t=incomes&s=' +  encodeURIComponent(JSON.stringify(_search));
      };
      
      $("#{{$t|escape:'html'}}_date_from").datepicker({
          changeMonth: true,
          changeYear: true,
          dateFormat: "yy-mm-dd",
      });
      $("#{{$t|escape:'html'}}_date_to").datepicker({
          changeMonth: true,
          changeYear: true,
          dateFormat: "yy-mm-dd",
      });
    }
    
    
    function setObjects() {
      var div1 = document.getElementById("{{$t|escape:'html'}}_order_paid");
      var div2 = document.getElementById("{{$t|escape:'html'}}_order_unpaid");
      var div3 = document.getElementById("{{$t|escape:'html'}}_order_total");
      var div4 = document.getElementById("{{$t|escape:'html'}}_income_paid");
      var div5 = document.getElementById("{{$t|escape:'html'}}_income_unpaid");
      var div6 = document.getElementById("{{$t|escape:'html'}}_income_total");
      DOMUtils.removeChildElements(div1);
      DOMUtils.removeChildElements(div2);
      DOMUtils.removeChildElements(div3);
      DOMUtils.removeChildElements(div4);
      DOMUtils.removeChildElements(div5);
      DOMUtils.removeChildElements(div6);
      
      div1.appendChild(document.createTextNode(_result.paids));
      div2.appendChild(document.createTextNode(_result.unpaids));
      div3.appendChild(document.createTextNode(_result.totals));
      div4.appendChild(document.createTextNode('$' + _getTotal(_result.im_paids)));
      div5.appendChild(document.createTextNode('$' + _getTotal(_result.im_unpaids)));
      div6.appendChild(document.createTextNode('$' + _getTotal(_result.im_totals)));
    }
    
    function _getTotal(orders) {
      var t = 0.00;
      for (var i in orders) {
        var o = orders[i];
        t = parseFloat(t) + parseFloat(o.total);
      }
      return parseFloat(t).toFixed(2);
    }
   // -->
</script>